<!--
 * @Author: 码上talk|RC
 * @Date: 2020-11-17 15:57:32
 * @LastEditTime: 2020-11-20 14:35:59
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /tacomall-merchant/src/components/form-item/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
    <div class="form-item">
        <div class="fi-label" v-if="label">
            <em v-if="filed && filed.isRequire">*</em>
            <span>{{label}}</span>
        </div>
        <div class="fi-slot">
            <slot></slot>
            <div class="fs-tip" v-if="!isValid && label">
                <p>内容不能空</p>
            </div>
        </div>
    </div>
</template>

<script>
/*eslint-disable */
export default {
    props: ['label', 'filed'],
    data() {
        return {
            isValid: true
        }
    },
    watch: {
        'filed.value': function (val) {
            this.isValid = true
        }
    },
    methods: {
        validateFiled() {
            const { isRequire, value } = this.filed
            if (_.isNil(value)) {
                this.isValid = false
                return this.isValid
            }
            const arrType = this.filed.type.split('|')
            for (let i = 0; i < arrType.length; i++) {
                if (/^array.*/.test(arrType[i])) {
                    this.isValid = value.length > 0
                    break
                }
                if (arrType[i] === 'int') {
                    this.isValid = /^[0-9]+.?[0-9]*/.test(value)
                    break
                }
            }
            return this.isValid
        }
    }
}
</script>

<style lang="less">
.form-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .fi-label {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100px;
        em {
            padding-right: 5px;
            font-size: 14px;
            color: #ed4014;
        }
        span {
            padding-right: 11px;
        }
    }
    .fi-slot {
        position: relative;
        flex: 1;
        .fs-tip {
            position: absolute;
            bottom: -25px;
            left: 0;
            color: #ed4014;
        }
    }
}
</style>